<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
            <form class="form" ng-if="!blade.notification">
                <fieldset>
                    <div ng-show="uploader.isHTML5 && !uploader.isUploading">
                        <!-- 3. ng-file-over | ng-file-over="className" -->
                        <div class="well my-drop-zone panel drag-area" uploader="uploader" nv-file-drop nv-file-over>
                            <div class="drag-content">
                                {{ 'platform.blades.import-main.labels.drag-note' | translate }}
                            </div>
                        </div>
                    </div>
                    <div ng-show="uploader.isUploading">
                        <div class="sub-t">{{ 'platform.blades.import-main.labels.upload-progress' | translate }}</div>
                        <div class="progress-bar"></div>
                    </div>
                </fieldset>
            </form>
            <!-- valid zip -->
            <div class="sub-t __border" ng-if="importRequest.exportManifest && !blade.notification && !blade.error || blade.notification.jobId && blade.notification.finished">{{ 'platform.blades.import-main.labels.import-data-information' | translate }}</div>
            <ul class="list __info" ng-if="importRequest.exportManifest && !blade.notification && !blade.error || blade.notification.jobId && blade.notification.finished">
                <li class="list-item">
                    <div class="list-t">{{ 'platform.blades.import-main.labels.author' | translate }}</div>
                    <div class="list-descr">{{importRequest.exportManifest.author}}</div>
                </li>
                <li class="list-item">
                    <div class="list-t">{{ 'platform.blades.import-main.labels.data-file-created' | translate }}</div>
                    <div class="list-descr" am-time-ago="importRequest.exportManifest.created"></div>
                </li>
                <li class="list-item">
                    <div class="list-t">{{ 'platform.blades.import-main.labels.created-platform-version' | translate }}</div>
                    <div class="list-descr">{{importRequest.exportManifest.platformVersion}}</div>
                </li>
            </ul>
            <!-- invalid zip -->
            <div class="sub-t" ng-if="blade.error && !blade.notification">{{ 'platform.blades.import-main.labels.upload-failed' | translate }}</div>
            <div class="table-wrapper" ng-if="blade.error && !blade.notification">
                <table class="table __items">
                    <tbody>
                        <tr class="table-item" ng-mouseup="export()" ng-class="{'__selected': 'export' === selectedNodeId}">
                            <td class="table-col">
                                <i class="table-ico fa fa-file-archive-o" style="color: red"></i>
                            </td>
                            <td class="table-col" ng-click='exportRequest.handleSecurity = !exportRequest.handleSecurity'>
                                <span class="table-t">{{ importRequest.fileName }}</span>
                                <span class="table-descr">{{ blade.error }}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <form class="form ng-pristine ng-valid" ng-if="importRequest.exportManifest && !blade.notification">
                <fieldset>
                    <div class="sub-t">{{ 'platform.blades.import-main.labels.platform-entries' | translate }}</div>
                    <div class="table-wrapper">
                        <table class="table">
                            <tbody>
                                <tr class="table-item"
                                    ng-click="importRequest.handleSecurity = !importRequest.handleSecurity"
                                    ng-class="{ '__disabled' : !importRequest.exportManifest.handleSecurity,  '__selected' : importRequest.handleSecurity }">
                                    <td class="table-col">
                                        <div class="ui-grid-selection-row-header-buttons ui-grid-icon-ok" ng-class="{'ui-grid-row-selected': importRequest.handleSecurity}">&nbsp;</div>
                                    </td>
                                    <td class="table-col">
                                        <span class="table-t">{{ 'platform.blades.import-main.menu.security.title' | translate }}</span>
                                        <span class="table-descr">{{ 'platform.blades.import-main.menu.security.description' | translate }}</span>
                                    </td>
                                </tr>
                                <tr class="table-item"
                                    ng-click="importRequest.handleBinaryData = !importRequest.handleBinaryData"
                                    ng-class="{ '__disabled' : !importRequest.exportManifest.handleBinaryData,  '__selected' : importRequest.handleBinaryData }">
                                    <td class="table-col">
                                        <div class="ui-grid-selection-row-header-buttons ui-grid-icon-ok" ng-class="{'ui-grid-row-selected': importRequest.handleBinaryData}">&nbsp;</div>
                                    </td>
                                    <td class="table-col">
                                        <span class="table-t">{{ 'platform.blades.import-main.menu.binary.title' | translate }}</span>
                                        <span class="table-descr">{{ 'platform.blades.import-main.menu.binary.description' | translate }}</span>
                                    </td>
                                </tr>
                                <tr class="table-item"
                                    ng-click="importRequest.handleSettings = !importRequest.handleSettings"
                                    ng-class="{ '__disabled' : !importRequest.exportManifest.handleSettings,  '__selected' : importRequest.handleSettings }">
                                    <td class="table-col">
                                        <div class="ui-grid-selection-row-header-buttons ui-grid-icon-ok" ng-class="{'ui-grid-row-selected': importRequest.handleSettings}">&nbsp;</div>
                                    </td>
                                    <td class="table-col">
                                        <span class="table-t">{{ 'platform.blades.import-main.menu.settings.title' | translate }}</span>
                                        <span class="table-descr">{{ 'platform.blades.import-main.menu.settings.description' | translate }}</span>
                                    </td>
                                </tr>
                                <tr class="table-item"
                                    ng-click="importRequest.handleDynamicProperties = !importRequest.handleDynamicProperties"
                                    ng-class="{ '__disabled' : !importRequest.exportManifest.handleDynamicProperties,  '__selected' : importRequest.handleDynamicProperties }">
                                    <td class="table-col">
                                        <div class="ui-grid-selection-row-header-buttons ui-grid-icon-ok" ng-class="{'ui-grid-row-selected': importRequest.handleDynamicProperties}">&nbsp;</div>
                                    </td>
                                    <td class="table-col">
                                        <span class="table-t">{{ 'platform.blades.import-main.menu.dynamic-props.title' | translate }}</span>
                                        <span class="table-descr">{{ 'platform.blades.import-main.menu.dynamic-props.description' | translate }}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="sub-t">{{ 'platform.blades.import-main.labels.choose-modules' | translate }}</div>
                    <div class="table-wrapper">
                        <table class="table">
                            <tbody>
                                <tr class="table-item"
                                    ng-repeat="data in importRequest.exportManifest.modules | orderBy: 'id'"
                                    ng-click="data.isChecked = !data.isChecked; updateModuleSelection()"
                                    ng-class="{ '__selected' : data.isChecked }">
                                    <td class="table-col">
                                        <div class="ui-grid-selection-row-header-buttons ui-grid-icon-ok" ng-class="{'ui-grid-row-selected': data.isChecked}">&nbsp;</div>
                                    </td>
                                    <td class="table-col">
                                        <span class="table-t">{{data.id}}</span>
                                        <span class="table-descr">{{'module.' + data.id + '.description' | translate}}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
            </form>
            <div class="form" ng-if="blade.notification">
                <div class="block">
                    <div>
                        <div class="sub-t" ng-show="!blade.notification.jobId || !blade.notification.finished">{{ 'platform.blades.import-main.labels.import-progress' | translate }}</div>
                        <div class="sub-t" ng-show="blade.notification.jobId && blade.notification.finished">{{ 'platform.blades.import-main.labels.import-finished' | translate }}</div>
                        <hr>
                        <div class="block" ng-if="blade.notification.created || blade.notification.finished">
                            <p ng-if="blade.notification.created" ng-class="{'no-data': blade.notification.created}" class="text">{{ 'platform.blades.import-main.labels.start' | translate }} — <i class="fa fa-clock-o"></i>&nbsp;{{ blade.notification.created | amParse | date:'mediumTime' }}</p>
                            <p ng-if="blade.notification.finished" ng-class="{'no-data': blade.notification.finished}" class="text">{{ 'platform.blades.import-main.labels.end' | translate }} — <i class="fa fa-clock-o"></i>&nbsp;{{ blade.notification.finished | amParse | date:'mediumTime' }}</p>
                        </div>
                        <div ng-show="!blade.notification.jobId || !blade.notification.finished">
                            <div class="progress-bar"></div>
                            <div class="table-t">{{blade.notification.description}}</div>
                        </div>

                        <div ng-if="blade.notification.errorCount > 0">
                            <span class="sub-t">{{ 'platform.blades.import-main.labels.errors' | translate }}</span>
                            <div class="log">
                                <p ng-repeat="error in blade.notification.errors track by $index" class="error" ng-bind-html="error">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
